<template>
	<view class="main">
		<view v-if="uploadtype == 'uploadImg'" class="box_img" v-for="(item,index) in fileList" :key="index">
			<image :src="item.thumb" @click="previewImage(index)" mode=""></image>
			<u-icon class="close" @click='deletePic(index)' name="close" color="#ccc" size="20"></u-icon>
		</view>
		<view style="height: 80px;">
			<view v-if="uploadtype == 'uploadFile'" class="box_attach" v-for="(item,index) in fileList" :key="index">
				<view class="box">
					<u-icon name="attach" color="#ccc" size="28"></u-icon>
					<view style="color:#65a9ff;margin-left: 5px;margin-right: 5px;" @click="filePreview(item.url)">
						{{item.name}}
					</view>
					<u-icon class="icon" name="trash" @click='deletePic(index)' color="#ccc" size="28"></u-icon>
				</view>

			</view>
		</view>

		<u-upload :accept="'image'||'file'" :deletable="true" :fileList="fileList" @afterRead="afterRead"
			:previewFullImage="true" @delete="deletePic" name="1" :maxCount="maxCount" width="80" height="80">
			<view v-if="uploadtype == 'uploadFile'" class="upload">
				<u-icon name="plus" size="28"></u-icon>
			</view>
			<view v-if="uploadtype == 'uploadImg'" class="uploadImg">
				<u-icon color="#2979ff" name="plus" size="28"></u-icon>
				<view class="text">
					上传文件
				</view>
			</view>
		</u-upload>

		<u-modal :show="show" :showCancelButton='true' @cancel="cancel" @confirm="confirm(index)">
			<view v-slot="content">
				确定删除吗？
			</view>
		</u-modal>
	</view>

</template>

<script>
	import {
		minioUpload,
		getFile
	} from '@/common/api/upload/file.js'
	import {
		kkfilePreview
	} from '@/common/js/urils.js'

	export default {
		props: {
			// 上传控件类型 uploadFile | uploadImg
			uploadtype: {
				type: String,
				default: 'uploadImg'
			},
			maxCount: {
				type: Number,
				default: 9
			},
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				fileList: [],
				show: false,
			}
		},
		async onLoad() {
			// console.log('附件回显', this.value);
		},
		watch: {
			value: {
				handler(newval, oldval) {
					// console.log('附件更新', newval, oldval)
					if (newval) {
						let idArr = newval.split(',')
						let tempArr = []
						this.fileList.forEach(v => {
							tempArr.push(v.id)
						})
						idArr.forEach(async (v) => {
							if (!tempArr.includes(v)) {
								const res = await getFile({
									id: v
								})
								// console.log('附件回显', res)
								if (res.data == null) {
									console.warn('无效附件id', v)
								} else {
									let file = {
										id: res.data.id,
										name: res.data.name,
										status: 'done',
										thumb: res.data.url,
									}
									this.fileList.push(file)
									console.log(this.fileList);
								}
							}

						})
					}

				},
				immediate: true,
				deep: true
			},
		},

		methods: {
			// 图片预览
			previewImage(index, val) {
				var photoList = this.fileList.map(item => { // item 获取到的图片地址
					return item.thumb;
				});
				uni.previewImage({
					current: index, // 当前显示图片的索引值
					urls: photoList, // 需要预览的图片列表，photoList要求必须是数组
					loop: true, // 是否可循环预览
				})

			},
			// 文件预览
			filePreview(url) {
				let file = kkfilePreview(url)
				// 判断当前平台，如果是H5则使用web-view加载预览页面  
				if (uni.getSystemInfoSync().platform === 'h5') {
					uni.navigateTo({
						url: file
					});
				} else {
					// 在其他平台上，尝试使用uni.openDocument打开文件  
					uni.openDocument({
						filePath: file,
						// fileType: '文件格式', // 根据实际情况填写  
						success: function(res) {
							console.log('打开文档成功');
						},
						fail: function(err) {
							console.error('打开文档失败：', err.message);
						}
					});
				}
			},
			// 删除图片
			deletePic(index) {
				this.show = true
				// this.fileList.splice(index, 1)
			},
			confirm(index) {
				// console.log(111);
				this.show = false;
				this.fileList.splice(index, 1)
				let id = ''
				this.fileList.forEach(item => {
					id += ',' + item.id
				})
				id = id.slice(1)
				this.$emit('f_echoids', id)
			},
			cancel() {
				this.show = false;
			},
			// 新增图片
			async afterRead(event) {
				const imgBlob = await fetch(event.file.url).then(r => r.blob())
				const file = new File([imgBlob], event.file.name, {
					type: event.file.type
				})
				let url = ''
				let id = ''
				debugger
				minioUpload(file).then(res => {
					url = res.data.url
					id = res.data.id

					const item = Object.assign(event.file, {
						status: 'success',
						message: '',
						url: url,
						id: id
					})
					this.fileList.push(item)
					let id = ''
					this.fileList.forEach(item => {
						id += ',' + item.id
					})
					id = id.slice(1)
					// console.log('子组件附件更新', id)
					this.$emit('f_echoids', id)
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-wrap: wrap;
		// height: 150px;
		overflow: auto;
		// justify-content: space-evenly;
		position: relative;
		// border: 1px solid blue;
	}

	.upload {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80px;
		height: 80px;
		background-color: #f4f5f7;
		position: absolute;
		top: 0;
	}

	.uploadImg {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 80px;
		height: 80px;
		position: absolute;
		top: 0;
		color: #3296FA;
		left: 35%;

		.text {
			// margin-right: 50rpx;
			// width: 100%;
			// text-align: center;
			font-size: 40rpx;
		}
	}

	.box_attach {
		display: flex;

		.box {
			display: flex;
			width: 260px;

		}
	}





	/deep/ .u-upload__wrap__preview {
		display: none;
	}

	/deep/ .u-upload__button {
		// display: none;
	}

	/deep/ .u-icon {
		height: 25px;
	}

	.box_img {
		width: 80px;
		height: 80px;
		position: relative;
		margin-right: 30px;

		image {
			height: 100%;
			width: 100%;
		}

		.close {
			position: absolute;
			top: 0;
			left: 65px;
			// width: 20px;
			// font-size: 20px;
			// background-color: #000;
			// color: #fff;
		}


	}

	.card_operation_upload {
		height: 50%;
		// border: 1px solid red;
		position: relative;

		&_background {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			border: 1px dotted #D7D7D7;
			border-radius: 4px;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			&_item {
				width: 100;
				color: #3296FA;

				span {
					font-size: 1.5rem
				}
			}
		}
	}
</style>